require(['./config'],() => {
    require(['swiper','swiper','request','template','header','footer','zoom'],(Swiper,Swiper2,req,template) => {
        class Detail{
            constructor(){
                this.getProdId()
                this.init()
            }
            init(){
                // 初始化swiper
                var mySwiper = new Swiper('.swiper-container1', {
                    direction: 'horizontal', // 水平切换选项
                    loop: true, // 循环模式选项
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                })
                // 畅销新品轮播图
                var swiper = new Swiper2('.swiper-container2', {
                    slidesPerView: 4,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });        
            }

            // 获取地址栏id
            getProdId(){
                const str = window.location.search.split('=')[1]
                // console.log(str)
                this.getData(str)
            }
            // 发送请求
            getData(prodId){
                req.getDetailsData(prodId)
                    .then(res => {
                        if(res.code === 200){
                            // 渲染页面
                            console.log(res)
                            const { detail } = res.data
                            this.renderHtml(detail)
                        }
                    })
            }
            // 渲染页面
            renderHtml(res){
                // console.log(res)
                // descContentList 商品详情
                // id 商品 id 
                // photo 放大镜 图片
                // title 商品标题
                // price 商品价格
                // saleNum 销量
                const { descContentList , id ,photo,title,price,saleNum } = res
                // console.log(photo[0].url)
                $('.product_infomation').html(template('prodDetailTemplate',{ descContentList , id ,photo,title,price,saleNum }))
                this.initzoom()
                this.addToCart({id,photo,title,price,saleNum})
            }
            initzoom(){
                $(".zoom-image").elevateZoom({
                    gallery:'thumbslist'
                })
            }
            addToCart(prodInfo) {
                const {id,photo,title,price,saleNum} = prodInfo
                // 给购物车按钮绑定点击事件
                $('.add-basket').click(() => {
                    let prodList = localStorage.getItem('prodList')
                    // console.log(prodList)
                    if(prodList){
                        prodList = JSON.parse(prodList)
                        // 有这条数据(prodList)
                        // 没有这一条商品信息，往这个数组里面加一条商品信息
                        // 有这一条商品信息 让这条数据count + 1
                        const flag = prodList.some(item => {
                            return item.id === id
                        })
                        if(flag){
                            // 代表有这条商品数据
                            prodList.forEach(item => {
                                item.id === id ? item.count++ : ''
                            })
                        }
                        else{
                            // 代表没有这条商品数据
                            prodList.push({
                                id,
                                imgSrc:photo[0].url,
                                title,
                                price,
                                saleNum,
                                count:$('.txt-amount').val() - 0
                            })
                        }
                        // 重新保存一下数据
                        localStorage.setItem('prodList',JSON.stringify(prodList))

                    }else{
                        // 没有这条数据
                        const arr = [{id,imgSrc:photo[0].url,title,price,saleNum,count:$('.txt-amount').val() - 0}]
                        
                        // 放到localstorage里面
                        localStorage.setItem('prodList',JSON.stringify(arr))
                    }

                    $('.tip').fadeIn(1000,() => {
                        setTimeout(() => {
                            $('.tip').fadeOut(1000)
                        })
                    })
                })
            }
        }
        return new Detail()
    })
})